import React, {CSSProperties, useImperativeHandle} from "react";
import {Alert, Col, Form, Input, message, Row} from "antd";
import styled from "@emotion/styled";
import {Post} from "../../utils/http";

export interface FromProp {
    ip: string;
    part: string;
    username: string;
    password: string;
    database: string;
    table_prefix: string;
}

const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
};

type FirstProp = {
    innerRef: React.Ref<{saveDatabase(): void}>;
    style: CSSProperties;
    isNext: (flag: boolean) => void;
}

export const FirstStep:React.FC<FirstProp> = (props: FirstProp) => {

    const [form] = Form.useForm<FromProp>();

    useImperativeHandle(props.innerRef, () => ({
        saveDatabase: () => {
            setDatabase()
        }
    }))

    const setDatabase = () => {
        form.validateFields().then(value => {
            Post<boolean>('/install/database', {...value}).then(res => {
                if (res.code === '100200') {
                    message.success('配置数据库成功');
                    props.isNext(true);
                } else {
                    message.error(res.msg);
                    props.isNext(false);
                }
            })
        })
    }


    return <Container style={props.style}>
        <Col span={22} offset={1} style={{marginTop: '8%'}}>
            <Alert message="现在只支持MySQL数据库！" type="warning" showIcon style={{marginBottom: 20}}/>
            <Form
                className="form-area"
                {...layout}
                form={form}
                labelAlign={"left"}
                layout="horizontal"
                name="form_in_modal"
            >
                <div style={{width: '48%'}}>
                    <Form.Item label="地址" name="ip" rules={[{required: true, message: '请填写数据库地址信息'}]}>
                        <Input placeholder="数据库地址" />
                    </Form.Item>
                    <Form.Item label="端口" name="part" rules={[{required: true, message: '请填写数据库端口信息'}]}>
                        <Input placeholder="数据库端口" />
                    </Form.Item>
                    <Form.Item label="数据库" name="database" rules={[{required: true, message: '请填写数据库名称信息'}]}>
                        <Input placeholder="数据库名称" />
                    </Form.Item>
                </div>
                <div style={{width: '48%'}}>
                    <Form.Item label="账号" name="username" rules={[{required: true, message: '请填写数据库账号信息'}]}>
                        <Input placeholder="数据库账号" />
                    </Form.Item>
                    <Form.Item label="密码" name="password" rules={[{required: true, message: '请填写数据库密码信息'}]}>
                        <Input placeholder="数据库密码" />
                    </Form.Item>
                    <Form.Item label="表前缀" name="table_prefix" rules={[{required: true, message: '请填写数据库前缀信息'}]}>
                        <Input placeholder="数据库表前缀" />
                    </Form.Item>
                </div>
            </Form>
        </Col>
    </Container>
}

const Container = styled(Row)`
.form-area {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
`
